<template>
    <div>
        <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);height: 90px;width: 100%;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <div class="breadcrumb">
                    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>小区管理</el-breadcrumb-item>
                    <el-breadcrumb-item>业主列表</el-breadcrumb-item>
                </div>
            </el-breadcrumb>
        </div>
        <div class="selectdiv" style="margin-bottom: 25px;">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-input v-model="queryInfo.id" placeholder="输入用户编号" clearable @clear="getUserList">
                        <el-button slot="append" icon="el-icon-search" @click="getUserById"></el-button></el-input>
                </el-col>
                <el-button type="primary" @click="dialogCreate = true">新建</el-button>
            </el-row>
        </div>
        <div>
            <el-card>
                <el-table
                        :data="userlist"
                        style="width: 100%"
                        :row-class-name="tableRowClassName">
                    <el-table-column
                            prop="id"
                            label="用户编号"
                            min-width="5%">
                    </el-table-column>
                    <el-table-column
                            prop="idNum"
                            label="身份证号"
                            min-width="15%">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            min-width="10%">
                    </el-table-column>
                    <el-table-column
                            prop="age"
                            label="年龄"
                            min-width="10%">
                    </el-table-column>
                    <el-table-column
                            prop="tel"
                            label="电话"
                            min-width="15%">
                    </el-table-column>
                    <el-table-column
                            prop="unit"
                            label="单元号"
                            min-width="10%">
                    </el-table-column>
                    <el-table-column
                            prop="houseName"
                            label="房屋编号"
                            min-width="15%">
                    </el-table-column>
                    <el-table-column
                            prop="time"
                            label="开始使用时间"
                            min-width="15%">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            min-width="10%">
                        <template slot-scope="scope">
                            <el-button type="text" @click="showEditDialog(scope.row.id)">修改</el-button>
                            <el-button @click="deleteUserById(scope.row.id)" type="text">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryInfo.pagenum"
                        :page-sizes="[2, 5, 10, 15]"
                        :page-size="queryInfo.pagesize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totle"></el-pagination>
            </el-card>
        </div>
        <!--新建业主弹出框-->
        <el-dialog
                title="新建业主"
                :visible.sync="dialogCreate"
                width="50%"
                @close="addDialogClosed">
            <div>
                <el-form :inline="true" :model="addUserForm"  ref="addUserFormRef">
                    <el-form-item label="家庭住址" prop="address">
                        <el-input v-model="addUserForm.address" placeholder="输入家庭住址" style="width: 400px;"></el-input>
                    </el-form-item>
                    <el-form-item label="业主年龄" prop="age">
                        <el-input v-model="addUserForm.age" placeholder="输入业主年龄" style="width: 400px;"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号" prop="idNum">
                        <el-input v-model="addUserForm.idNum" placeholder="输入身份证号" style="width: 400px;"></el-input>
                    </el-form-item>
                    <div>
                        <el-form-item label="个人密码" prop="password">
                            <el-input v-model="addUserForm.password" placeholder="请输入密码"
                                      style="width: 168px;"></el-input>
                        </el-form-item>
                    </div>
                    <el-form-item label="电话号码" prop="tel">
                        <el-input v-model="addUserForm.tel" placeholder="输入电话号码" style="width: 400px;"></el-input>
                    </el-form-item>
                    <el-form-item label="业主姓名" prop="userName">
                        <el-input v-model="addUserForm.userName" placeholder="输入业主姓名" style="width: 400px;"></el-input>
                    </el-form-item>
                    <el-form-item label="房屋编号" prop="houseName">
                        <el-input v-model="addUserForm.houseName" placeholder="输入房屋编号" style="width: 400px;"></el-input>
                    </el-form-item>
                    <el-form-item label="单元号" prop="unit">
                        <el-input v-model="addUserForm.unit" placeholder="输入单元号" style="width: 400px;"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogCreate = false">取 消</el-button>
            <el-button type="primary" @click="addUser">确 定</el-button>
            </span>
        </el-dialog>
        <!--修改业主弹出框-->
        <el-dialog
                title="修改业主信息"
                :visible.sync="editDialog"
                width="50%"
                :close="editDialogClosed">
            <div>
                <el-form :inline="true" :model="editUserForm" class="demo-form-inline" ref="editUserFormRef">
                    <el-form-item label="修改身份证号" prop="idNum">
                        <el-input v-model="editUserForm.idNum" placeholder="修改身份证号" style="width: 400px;"></el-input>
                    </el-form-item>
                    <el-form-item label="修改业主姓名" prop="name">
                        <el-input v-model="editUserForm.name" placeholder="修改业主姓名" style="width: 400px;"></el-input>
                    </el-form-item>
                    <el-form-item label="修改业主年龄" prop="age">
                        <el-input v-model="editUserForm.age" placeholder="修改业主年龄" style="width: 400px;"></el-input>
                    </el-form-item>
                    <el-form-item label="修改电话号码" prop="tel">
                        <el-input v-model="editUserForm.tel" placeholder="修改电话号码" style="width: 400px;"></el-input>
                    </el-form-item>
                    <el-form-item label="修改业主住址" prop="address">
                        <el-input v-model="editUserForm.address" placeholder="修改业主住址" style="width: 400px;"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="editDialog = false">取 消</el-button>
            <el-button type="primary" @click="editUser">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        created() {
            this.getUserList()
        },
        methods: {
            //弹出框关闭后数据清除
            addDialogClosed() {
                this.$refs.addUserFormRef.resetFields()
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            //获取业主列表
            async getUserList() {
                const {data: res} = await this.$http.get('/sysUsers/findAllOwner/')
                if (res.code !== 200) {
                    return this.$message.error('获取用户列表失败！')
                }
                this.userlist = res.data
                console.log(this.addUserForm)
            },
            //根据id查找业主
            async getUserById(){
                const {data: resp} = await this.$http.get('sysUsers/getUsrById/' + this.queryInfo.id)
                if (resp.code !== 200) {
                    return this.$message.error('获取用户列表失败！')
                }
                this.userlist= [resp.data]

            },

            handleSizeChange(newSize) {
                // console.log(newSize)
                this.queryInfo.pagesize = newSize
                this.getUserList()
            },
            //显示修改业主对话框
            async showEditDialog(id) {
                const {data: res} = await this.$http.get('sysUsers/getUsrById/' + id)
                if (res.code !== 200) {
                    return this.$message.error('查询用户信息失败！')
                }
                this.editUserForm = res.data
                this.editDialog= true
            },
            //修改业主并提交
            editUser(){
                this.$refs.editUserFormRef.validate(async valid => {
                    if(!valid) return
                    const {data: res} = await this.$http.put(
                        'sysUsers/updateById' ,
                        {
                            userId: this.editUserForm.id,
                            address: this.editUserForm.address,
                            age: this.editUserForm.age,
                            idNum: this.editUserForm.idNum,
                            tel: this.editUserForm.tel,
                            userName: this.editUserForm.name,
                        }
                    )
                    console.log(res.code)
                    if (res.code !== 200) {
                        return this.$message.error('更新用户信息失败！')
                    }
                    // 隐藏添加用户对话框
                    this.editDialog = false
                    this.$message.success('更新用户信息成功！')
                    this.getUserList()
                })
            },
            editDialogClosed() {
                this.$refs.editUserFormRef.resetFields()
            },
            // 监听 页码值 改变事件
            handleCurrentChange(newSize) {
                // console.log(newSize)
                this.queryInfo.pagenum = newSize
                this.getUserList()
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            //根据userId删除用户
            async deleteUserById(id){
                //弹框询问是否删除数据
                const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',

                }).catch( err => err)
                console.log(confirmResult)
                if(confirmResult !== 'confirm') {return this.$message.info('取消删除用户')}
                const {data : resp} = await this.$http.delete('/sysUsers/deleteById/'+id)
                if(resp.code !== 200) {return this.$message.error('删除用户失败') }
                this.$message.success('删除用户成功')
                this.getUserList()
            },

            //添加业主
            addUser() {
                this.$refs.addUserFormRef.validate(async valid => {
                    const {data: resp} = await this.$http.post('/sysUsers/addUser', this.addUserForm)
                    if (resp.code !== 200) {
                        return this.$message.error('添加用户失败！')
                    }
                    this.$message.success('添加用户成功！')
                    this.dialogCreate = false
                    this.getUserList()
                })
            },
        },

        data() {


            return {
                queryInfo: {
                    userName: '',
                    id_Num: '',
                    // 当前页数
                    pagenum: 1,
                    // 每页显示多少数据
                    pagesize: 5
                },
                totle: 0,
                userlist: [],
                addDialogVisible: false,
                addUserForm: {
                    address: '',
                    age: '',
                    idNum: '',
                    userName: '',
                    tel: '',
                    password: '',
                    houseName:'',
                    unit:'',

                },
                editDialog: false,
                editUserForm: {},
                // userrule: {
                //     idNum: [
                //         {required: true, message: '请输入身份证号', trigger: 'blur'},
                //         {min: 1, max: 18, message: '长度为2 个字符', trigger: 'blur'}
                //     ],
                //     userName: [
                //         {required: true, message: '请输入业主名字', trigger: 'blur'},
                //         {min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
                //     ],
                //     age: [
                //         {required: true, message: '请输入业主年龄', trigger: 'blur'},
                //         {min: 1, max: 3, message: '长度在 1 到 3 个字符', trigger: 'blur'}
                //     ],
                //     tel: [
                //         {required: true, message: '请输入活动名称', trigger: 'blur'},
                //         {min: 11, max: 11, message: '长度为11个字符', trigger: 'blur'}
                //     ],
                //     password: [
                //         {required: true, message: '请输入房子编号', trigger: 'blur'},
                //         {min: 1, max: 10, message: '长度在 1到 11个字符', trigger: 'blur'}
                //     ],
                //     address: [
                //         {required: true, message: '请输入房子编号', trigger: 'blur'},
                //         {min: 1, max: 10, message: '长度在 1 到 11 个字符', trigger: 'blur'}
                //     ],
                // },
                dialogEdit: false,
                dialogCreate: false,
                formInline: {
                    user: '',
                    id_num: ''
                }
            }


        },
    }
</script>

<style scoped>
    .selectdiv {
        margin-top: 30px;
        margin-bottom: 10px;
    }
    .breadcrumb {
        margin-top: 29px;
        margin-left: 20px;
        font-size: 25px
    }

</style>

